<script setup>
    import { useRouter } from "vue-router";
    import { pageOfficeDealDataService } from "@/service/pageoffice-deal-data.service.js";
    import { computed, ref } from "vue";
    import { setpStore } from '@/store/setp';
    import { storeToRefs } from "pinia";

    
    const setpRef = storeToRefs(setpStore());
    const setp = setpStore();

    const router = useRouter();

    const click = (num) => {
        if(num == 1){
            router.push()
        } else if(num == 2){
            router.push()
        } else if(num == 3){
            router.push()
        } else if(num == 4){
            router.push('/view')
        } else if(num == 5){
            router.push('/check')
        } else if(num == 6){
            router.push('/edit')
        } else if(num == 7){
            router.push('/compare')
        }else if(num == 8){
            router.push('/common')
        }else if(num == 9){
            router.push('/hilint')
        }
    }

    const pageOfficeEdit = () => {
        console.log(window.location.href);
        var url = '127.0.0.1:9179/ms-doc/api/v1/pageoffice/edit-template-homeMortgage';
        const map = new Map();
        map.set("effTmplPk", "");
        map.set("appId", "");
        map.set("userNo", "123");
        map.set("callBackUrl", "/test");
        const parameterOfUrl = pageOfficeDealDataService.getParameterOfUrl(url, map);
        pageOfficeDealDataService.openPageOfficePage(parameterOfUrl);
        
    }

    // 步骤条点击事件
    const setpClick = (index) => {
        if(index == 1){
            setp.set(1)
            click(4)
        } else if(index == 2){
            setp.set(2)
            click(6)
        } else if(index == 3){
            setp.set(3)
            click(4)
        } else if(index == 4){
            setp.set(4)
            pageOfficeEdit();
        } else if(index == 5){
            setp.set(5)
            click(10)
        } else if(index == 6){
            setp.set(6)
        } 
    }

    const setpNum = computed(() => {
        return Number.parseInt(setpRef.getSetp.value)
    })

</script>

<template>
  <div>
    <div>
        <el-button type="primary" @click="click(1)">半模板</el-button>
        <el-button type="primary" @click="click(2)">标准模板</el-button>
        <el-button type="primary" @click="click(3)">普通模板</el-button>
        <el-button type="primary" @click="click(4)">预览模式</el-button>
        <el-button type="primary" @click="click(5)">修订模式</el-button>
        <el-button type="primary" @click="click(6)">编辑模式</el-button>
        <el-button type="primary" @click="click(7)">文件比较</el-button>
        <el-button type="primary" @click="click(8)">模板配置</el-button>
        <el-button type="primary" @click="pageOfficeEdit">pageoffice模板配置</el-button>
        <el-button type="primary" @click="click(9)">书签高亮</el-button>
    </div>
    <div>
        <h3>模板生命周期（配置使用pageoffice）</h3>
        <div>
            <el-steps :active="setpNum">
                <el-step title="预沟通预览" @click="setpClick(1)" description="发起预沟之前上传文件后使用onlyoffice第一次预览" />
                <el-step title="预沟通事项处理" @click="setpClick(2)" description="相应用户对预沟通事项进行处理，使用onlyoffice的审阅模式编辑文档" />
                <el-step title="新增模板预览" @click="setpClick(3)" description="选择已经沟通完成的模板文件时使用onlyoffice预览文件" />
                <el-step title="配置模板" @click="setpClick(4)" description="使用pageoffice配置合同模板" />
                <el-step title="预览模板" @click="setpClick(5)" description="模板审批节点中使用onlyoffice预览模板" />
                <el-step title="生成文件" @click="setpClick(6)" description="生成一个合同文件" />
            </el-steps>
        </div>
    </div>
  </div>
</template>

<style scoped>

</style>